<template>
  <a-card class="card">
    <a-form :form="form">
      <a-row :gutter="24">
       <a-col
          :span="24"
        >
          <a-form-item :wrapperCol="{ span: 22 }" :labelCol="{ span: 2 }" label="问题">
            <section style="height: 60px;margin-bottom: 66px;">
              <quill-editor
                class="editor-q"
                :options="editorOption"
                v-decorator="[
                  'range_time_picker',
                  {
                    rules: [
                      {
                        required: true,
                        message: 'The input is not valid E-mail!',
                      },
                    ]
                  }
                ]"
              />
            </section>
            <!-- <a-input
              v-decorator="[
                'range_time_picker',
                 {
                  rules: [
                    {
                      required: true,
                      message: 'The input is not valid E-mail!',
                    },
                  ]
                 }
              ]"
              show-time
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              
            /> -->
          </a-form-item>
        </a-col>

        <a-col
          :span="24"
        >
          <a-form-item class="a-form-item-editor" :wrapperCol="{ span: 22 }" :labelCol="{ span: 2 }" label="答案">
           <section style="height: 260px;margin-bottom: 66px;">
              <quill-editor
                class="editor"
                :options="editorOption"
                v-decorator="[
                  'editor',
                  {
                    rules: [
                      {
                        required: true,
                        message: 'The input is not valid E-mail!',
                      },
                    ]
                  }
                ]"
              />
            </section>
          </a-form-item>
        </a-col>

        <a-col
          :span="24"
          class="button-col"
        >
          <a-button type="primary">
            保存
          </a-button>
          <a-button>取消</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>
  export default {
    data () {
      return {
        form: this.$form.createForm(this),
        content: null,
        editorOption: {
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频
            ], //工具菜单栏配置
          },
          placeholder: '说明', //提示
          readyOnly: false, //是否只读
          theme: 'snow', //主题 snow/bubble
          syntax: true, //语法检测
        }
      }
    },

  }
</script>

<style lang="scss" scoped>
.card {
}
.editor-q {
  height: 60px;
  line-height: normal !important;
}

.editor {
  line-height: normal !important;
  height: 260px;
}
.button-col {
  display: flex;
  justify-content: center;
  button {
    margin: 0 $margin-base;
  }
}
</style>

<style lang="scss">
.a-form-item-editor {
  .ant-form-item-control {
    line-height: normal;
  }
}
</style>